<script setup>
import { reactive, computed,ref } from 'vue'
import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'
//import { MobileNumberValidator, PasswordValidator } from '@/core/utils/Validator'
import { message } from 'ant-design-vue'
const store = useStore(), router = useRouter(), route = useRoute()
const enable = ref(true)
const state =reactive({
  formType: 'password',
  disabled: false,
  timer: null,
  countdown: 60
})
// 表单内容
const formState = reactive({
  userName: 'admin',
  password: 'passwd',
  remember: true
})
// 表单验证成功处理
const onFinish = async values => {
  enable.value = false
  store.dispatch('asyncHasRoute', false)
  store.dispatch('auth/login', values).then(res => {
    message.success(res, 2, () => {
      const query = route.query
      const redirect = query.redirect ?? '/'
      const queryParams = Object.keys(query).reduce(
        (acc, cur) => {
          if (cur !== 'redirect') {
            acc[cur] = query[cur]
          }
          return acc
        },
        {}
      )
      router.push({ path: redirect, query: queryParams })
      //router.push('/dashboard')
    })
  }).catch(err=>{
    console.log(err)
    enable.value = true
  })
  // .finally(()=>{
  //   enable.value = true
  // })
  //console.log('Success:', values)
}
// 表单验证失败处理
const onFinishFailed = errorInfo => {
  //alert(JSON.stringify(errorInfo))
  console.log('Failed:', errorInfo)
}
const disabled = computed(() => {
  return !(formState.userName && formState.password && enable.value)
})
// 切换表单
const onToggleForm =()=>{
  if(state.timer) {
    state.disabled = false
    clearInterval(state.timer)
  } 
  state.formType = state.formType == 'password'? 'captcha': 'password'
}
// 发送验证码
const onSendCaptcha =()=>{
  state.countdown = 60
  state.disabled = true
  state.timer = setInterval(()=>{
    if(state.countdown < 0){
      clearInterval(state.timer)
      state.disabled = false
    }else{
      state.countdown--
    }
  }, 1000)
}
</script>
<template>
  <div class="wrapper">
    <div class="loginfrom animate__animated animate__backInDown">
      <div class="title"> Let's Get Lost</div>
      <a-form
        :model="formState"
        :no-style="true"
        name="normalLogin"
        :scroll-to-first-error="true"
        @finish="onFinish" @finish-failed="onFinishFailed">
        <div v-if="state.formType=='password'" class="frm-passwd animate__animated animate__flipInY">
          <a-form-item
            name="userName"
            :rules="[{ required: true, message: '请输入您的用户名!' }]"
          >
            <a-input v-model:value="formState.userName" autocomplete="off" placeholder="用户名" size="large" allow-clear>
              <template #prefix>
                <UserOutlined />
              </template>
            </a-input>
          </a-form-item>
          <a-form-item
            name="password"
            :rules="[{ required: true, message: '请输入您的登录密码!' }]">
            <a-input-password v-model:value="formState.password" autocomplete="off" placeholder="密码" size="large" allow-clear>
              <template #prefix>
                <LockOutlined />
              </template>
            </a-input-password>
          </a-form-item>
          <a-form-item>
            <a-form-item name="remember" no-style>
              <a-checkbox v-model:checked="formState.remember">Remember me</a-checkbox>
            </a-form-item>
            <a class="login-form-forgot" href="">Forgot password</a>
          </a-form-item>
          <a-form-item>
            <a-button :disabled="disabled" type="primary" html-type="submit" block>
              登录 Log in
            </a-button>
            Or
            <a @click="onToggleForm">使用短信验证码登录!</a>
          </a-form-item>
        </div>
        <div v-if="state.formType=='captcha'" class="frm-passwd animate__animated animate__flipInX">
          <a-form-item
            name="userName"
            :rules="[{ required: true, message: '请输入您的手机号!' }]"
          >
            <a-input v-model:value="formState.userName" autocomplete="off" placeholder="手机号" size="large" allow-clear>
              <template #prefix>
                <UserOutlined />
              </template>
            </a-input>
          </a-form-item>
          <a-form-item
            name="password"
            :rules="[{ required: true, message: '请输入您收到的验证码!' }]">
            <a-input
              v-model:value="formState.password" :maxlength="6" autocomplete="off" placeholder="验证码" size="large"
              allow-clear>
              <template #prefix>
                <verified-outlined />
              </template>
              <template #suffix>
                <a-button :disabled="state.disabled" @click="onSendCaptcha">
                  {{ state.disabled ?`${state.countdown}秒后再试`: '获取验证码' }}
                </a-button>
              </template>
            </a-input>
          </a-form-item>
          <a-form-item>
            <sub>验证码有期时间为10分钟</sub>
          </a-form-item>
          <a-form-item>
            <a-button :disabled="disabled" type="primary" html-type="submit" block>
              登录 Log in
            </a-button>
            Or
            <a @click="onToggleForm">使用密码登录!</a>
          </a-form-item>
        </div>
      </a-form>
      <span />
      <span />
      <span />
      <span />
    </div>
    <div class="title-panel">
      <span>&nsce;</span><span>@Copy G&M Dev系统</span>
    </div>
    <ul class="bg-bubbles">
      <li />
      <li />
      <li />
      <li />
      <li />
      <li />
      <li />
      <li />
      <li />
      <li />
    </ul>
  </div>
</template>
<style lang="less" scoped>

/* =========================================
Animation Keyframes
========================================= */
.title-panel {
  position:absolute;
  bottom: 0px; left: 0px;
  width:100%; height: 30px;
  z-index: 9;
  color:#cecccc;line-height: 30px;
  background-color:rgba(21, 74, 118, 0.171);
  padding: 0px 50px;
  display: flex;
  justify-content: space-between;
}
.loginfrom {
  z-index: 90;
  overflow:hidden;
  margin:260px auto ; padding:  110px 42px 10px 73px;
  width:380px;
  height:460px;
  box-shadow:0px 0px 20px 4px rgba(0,0,0,0.2);
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
  position: relative;
  color: #91d1d4;
  border-radius: 10px;
  .title {
    position:absolute;
    bottom: 0px; left: 0px;
    width:60px; height: 360px;
    padding:10px 0px;
    background-color:rgba(21, 74, 118, 0.171);
    font-size:36px;
    font-family:Arial;
    font-weight:500;
    color:#fff;
    writing-mode: vertical-lr;
    text-orientation: initial; 
    word-spacing: 5px;
    letter-spacing: 5px; 
    text-rendering: optimizeLegibility;
    /*
     text-transform: uppercase;
    writing-mode: sideways-lr; 
    text-orientation: upright; */
    &::first-letter {
      color: #f05b94;
      font-size:45px;
    }
  }
  &:hover {
    box-shadow:1px 1px 1000px 1000px rgba(211, 210, 210, 0.5),0px 0px 20px 4px rgba(231, 248, 75, 0.4);
  }
}
/**  */
.wrapper {
  background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
  background: linear-gradient(to bottom right, #06a7d8 0%, #b7d7e9 100%);
  opacity: 0.8;
  position: absolute;
  top: 0; left: 0;
  width: 100%; height:360px;
}
.bg-bubbles {
  position: absolute;
  top: 0;  left: 0;
  width: 100%;  height: 100%;  z-index: 1;
}
.bg-bubbles li {
  position: absolute;
  list-style: none;
  display: block;
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.15);
  bottom: -160px;
  -webkit-animation: square 25s infinite;
  animation: square 25s infinite;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
}
.bg-bubbles li:nth-child(1) {
  left: 10%;
}
.bg-bubbles li:nth-child(2) {
  left: 20%;
  width: 80px;
  height: 80px;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation-duration: 17s;
          animation-duration: 17s;
}
.bg-bubbles li:nth-child(3) {
  left: 25%;
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}
.bg-bubbles li:nth-child(4) {
  left: 40%;
  width: 60px;
  height: 60px;
  -webkit-animation-duration: 22s;
          animation-duration: 22s;
  background-color: rgba(255, 255, 255, 0.25);
}
.bg-bubbles li:nth-child(5) {
  left: 70%;
}
.bg-bubbles li:nth-child(6) {
  left: 80%;
  width: 120px;
  height: 120px;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
  background-color: rgba(255, 255, 255, 0.2);
}
.bg-bubbles li:nth-child(7) {
  left: 32%;
  width: 160px;
  height: 160px;
  -webkit-animation-delay: 7s;
          animation-delay: 7s;
}
.bg-bubbles li:nth-child(8) {
  left: 55%;
  width: 20px;
  height: 20px;
  -webkit-animation-delay: 15s;
          animation-delay: 15s;
  -webkit-animation-duration: 40s;
          animation-duration: 40s;
}
.bg-bubbles li:nth-child(9) {
  left: 25%;
  width: 10px;
  height: 10px;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation-duration: 40s;
          animation-duration: 40s;
  background-color: rgba(255, 255, 255, 0.3);
}
.bg-bubbles li:nth-child(10) {
  left: 90%;
  width: 160px;
  height: 160px;
  -webkit-animation-delay: 11s;
          animation-delay: 11s;
}
@-webkit-keyframes square {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-700px) rotate(600deg);
            transform: translateY(-700px) rotate(600deg);
  }
}
@keyframes square {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-700px) rotate(600deg);
            transform: translateY(-700px) rotate(600deg);
  }
}

  .loginfrom>span { position: absolute; }
  .loginfrom>span:nth-child(1) {
    width: 100%;
    height: 2px;
    background-image: linear-gradient(to right, transparent, #f84498);
    left: -100%;
    top: 0;
    animation: span-line-one 2s linear infinite;
  }

  .loginfrom>span:nth-child(2) {
    width: 2px;
    height: 100%;
    background-image: linear-gradient(to bottom, transparent, #aad314);
    right: 0;
    top: -100%;
    /* 延迟 0.25s */
    animation: span-line-two 2s 0.5s linear infinite;
  }
  .loginfrom>span:nth-child(3) {
    width: 100%;
    height: 2px;
    background-image: linear-gradient(to left, transparent, #eeea0bc2);
    left: 100%;
    bottom: 0;
    /* 延迟 0.5s */
    animation: span-line-three 2s 1s linear infinite;
  }
  .loginfrom>span:nth-child(4) {
    width: 2px;
    height: 100%;
    background-image: linear-gradient(to top, transparent, #8003f4);
    left: 0;
    bottom: -100%;
    /* 延迟 0.75s */
    animation: span-line-four 2s 1.5s linear infinite;
  }
  @keyframes span-line-one { 50%,100% { left: 100%; }}
  @keyframes span-line-two { 50%,100% { top: 100%; }}
  @keyframes span-line-three { 50%, 100% { left: -100%; }}
  @keyframes span-line-four { 50%, 100% { bottom: 100%; }}
</style>